<template>
  <div>
    <test-ee title="字符串比较" @click="testStrCompare"></test-ee>

    <test-ee title="搜索并渲染关键字">
      <div>
        <ee-input clear modelValue="" @value="(v) => search.search(v, i => i.name)" placeholder="测试搜索"></ee-input>
        <ul>
          <li v-for="item, index in search" :key="index">
            <ee-highlight :search="item.search" />
          </li>
        </ul>
      </div>
    </test-ee>

    <test-ee title="搜索并渲染关键字(DOM元素)">
      <ee-input clear modelValue="" @value="(v) => searchDOM(v)" placeholder="测试搜索"></ee-input>
    </test-ee>
  </div>
</template>

<script type="text/javascript">
import { testTime } from './test';
import { searchDOM } from '../ee-ui/__use/search'

export default {
  name: "test-time",
  data() {
    return {
      search: [
        { name: 'C#' },
        { name: 'Java Script' },
        { name: 'Vue' },
        { name: 'JAVA' },
        { name: 'jSp rr jaja' },
      ],
      test: {},
    }
  },
  methods: {
    /** 字符串忽略大小写比较
     * 
     * 正则(.6) : includes(1) : indexOf(1)
     */
    testStrCompare() {
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      const generate = new Array(32);
      function generateRandomString() {
        const charactersLength = characters.length;
        for (let i = 0; i < generate.length; i++)
          generate[i] = characters.charAt(Math.floor(Math.random() * charactersLength));
        return generate.join('');
      }

      /** @type {string[]} */
      const array = new Array(500000);
      testTime(function generateRandomStringArray() {
        for (let i = 0; i < array.length; i++) {
          array[i] = generateRandomString();
        }
      });

      // 随机生成指定长度的关键字
      const keywords = generateRandomString().substring(0, 2);
      console.log("随机关键字", keywords);

      testTime(function 正则比较() {
        const regex = new RegExp(keywords, "i");
        console.log(`筛选结果 ${array.filter(i => regex.test(i)).length} 条`);
      });

      testTime(function 大小写转换比较() {
        const k = keywords.toLowerCase();
        console.log(`筛选结果 ${array.filter(i => i.toLowerCase().includes(k)).length} 条`);
      })

      testTime(function 自定义比较() {
        const k = keywords.toLowerCase();
        const result = [];
        let l;
        let i;
        let temp;
        for (const str of array) {
          l = str.toLowerCase();
          i = 0;
          temp = undefined;
          while (true) {
            i = l.indexOf(k, i);
            if (i < 0)
              break;
            if (!temp) {
              temp = [];
              result.push({ str, indexes: temp });
            }
            temp.push(i);
            i += k.length;
          }
        }
        console.log(`筛选结果 ${result.length} 条`, result.filter(i => i.indexes.length > 2).slice(0, 10));
      })
    },
    searchDOM(k) {
      testTime(function DOM元素中搜索关键词() {
        searchDOM(document.body, k)
      })
    },
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped></style>